<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2019-12-23 16:10
  PageName：p2_practice_dataValidate.html
  Function：案例2：表单数据校验
-->

<head>
    <meta charset="UTF-8">
    <title>案例2：表单数据校验</title>
    <script type="text/javascript">
        function checkForm() {
            // 获取元素的值
            const userNameValue = document.getElementById("username").value;
            const passWordValue = document.getElementById("password").value;

            if ("" === userNameValue) {
                alert("用户名不可为空");
                return false;
            }

            if ("" === passWordValue) {
                alert("密码不可为空");
                return false;
            }
        }
    </script>
</head>

<body>
<form action="#" method="get" onsubmit="return checkForm()">
    <table style="width: 60%; height: 60%; background-color:#ffffff;">
        <caption></caption>

        <tr>      
            <th scope="col"></th>
        </tr>

        <tr>
            <td colspan="3">会员注册USER REGISTER</td>
        </tr>

        <tr>
            <td style="width: 20%;">用户名:</td>
            <td style="width: 40%;"><label><input type="text" name="username" id="username" onblur="loseFocus(this.value)"></label></td>
            <td style="width: 40%;"><span id="username_msg"></span></td>
        </tr>

        <tr>
            <td>密码:</td>
            <td><label><input type="password" name="password" id="password"></label></td>
            <td><span id="password_msg"></span></td>
        </tr>

        <tr>
            <td>确认密码:</td>
            <td><label><input type="password" name="rePassword" id="rePassword"></label></td>
            <td><span id="rePassword_msg"></span></td>
        </tr>

        <tr>
            <td>Email:</td>
            <td><label><input type="text" name="email" id="email"></label></td>
            <td><span id="email_msg"></span></td>
        </tr>

        <tr>
            <td>姓名:</td>
            <td><label><input type="text" name="name"></label></td>
        </tr>

        <tr>
            <td>性别:</td>
            <td>
                <label><input type="radio" name="sex" value="男"> 男</label>
                <label><input type="radio" name="sex" value="女"/>女</label>
            </td>
        </tr>

        <tr>
            <td>出生日期</td>
            <td><label><input type="text" name="birthday"></label></td>
        </tr>

        <tr>
            <td>验证码</td>
            <td><label><input type="text" name="checkcode"></label></td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="submit" value="注册"/>
            </td>
        </tr>
    </table>
</form>
</body>
</html>